<template>
  <div class="content">
    <div ref="wrapDiv" class="wrap">
      <!--左侧 正常图区域-->
      <div ref="normalDiv" @mousemove="yidong()" @mouseover="yiru()" @mouseout="yichu()" class="normal-wrap">
        <!--商品的正常图-->
        <img :src="src"/>
        <!--放大镜方块-->
        <div ref="zoomDiv" id="zoom" class="zoom"></div>
      </div>
      <!--右侧 放大图区域-->
      <div ref="bigDiv" class="big-wrap">
        <img :src="src"/>
      </div>

      <div class="seti">
        <span>距离开始还剩</span>
        <span class="block">{{day}}天</span>
        <span class="block">{{hour}}</span>
        <span>:</span>
        <span class="block">{{minete}}</span>
        <span>:</span>
        <span class="block">{{secnd}}</span>
      </div>

      <div class="footer2">
        <img @click="zuoyi()" src="/static/lyl/z.png" alt="">
        <img @click="xuanzhong(index)" :class="{act4:cur==index}" v-for="(item,index) in data" :src="item" alt="">
        <img @click="youyi()" src="/static/lyl/y.png" alt="">
      </div>

    </div>
    <div class="con-right">
      <div class="right-tit">
        <p>新疆哈密瓜1500kg </p>
        <p>
          <span>全国</span>
          <span>礼拜五</span>
          <span>次日达</span>
          <span>自营</span>
        </p>
      </div>
      <div class="right-center">
        <div class="right-center-l">
          <img src="/static/lyl/juzi.png" alt="">
          <p>资深买家</p>
        </div>
        <p>雀斑石榴持续热卖！云南蒙自石榴，原产波斯（今伊朗）一带，公元前二世纪时传 入我国。是中国三大石榴之一，粒大皮薄，汁多味甜爽口。雀斑石榴持续热卖！云南蒙自石榴，原产波斯（今伊朗）一带，公元前二世纪时传 入我国。是中国三大石榴之一，粒大皮薄，汁多味甜爽口。</p>
      </div>
      <div class="right-foot">
        <p>
          <span>现价:</span>
          <span>￥20.0 </span>
          <span>原价：￥40.0</span>
        </p>
        <p class="please">
          <span>请选择规格</span>
          <span @click="xuanzhong2(index)" :class="{active:cur6==index}" class="guige" v-for="(item,index) in data2">{{item}}</span>
        </p>
        <p class="please">
          <span>请选择规格</span>
          <span @click="xuanzhong3(index)" :class="{active:cur7==index}" class="guige" v-for="(item,index) in data3">{{item}}</span>
        </p>
        <div class="fot-d1">
          <div class="fot-d1-left">
            <span>数 量 : </span>
            <p>
              <span @click="jian()">-</span>
              <span>{{n}}</span>
              <span @click="jia()">+</span>
            </p>
            <span>件</span>
          </div>
          <button @click="tanchu()">加入购物车</button>
          <router-link to="/shouhuo1/2">
            <button>立即购买</button>
          </router-link>
        </div>
      </div>
      <div class="right-foot2">
        <div class="right-foot2-left">
          <img @click="shifou()" :src="bol?'/static/lyl/xinghong.png':'/static/lyl/xinghui.png'" alt="">
          <span>{{bol?'已收藏':'收藏此商品'}}</span>
        </div>
        <div class="right-foot2-right">
          <span>分享到：</span>
          <a v-for="item in data4" :href="item.href" target="_blank">
            <img :src="item.src" alt="">
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
      name: "Maginfrying",
      data(){
        return {
          bol:false,
          n:1,
          cur6:0,
          cur7:0,
          cur:0,
          day:0,
          hour:0,
          minete:0,
          src:'/static/lyl/500x500.png',
          secnd:0,
          data:['/static/lyl/500x500.png','/static/lyl/r1.png','/static/lyl/r2.png','/static/lyl/r3.png'],
          data2:['500g','1000g','2000g'],
          data3:['500g','1000g'],
          data4:[
            {href:'http://t.qq.com/',src:'/static/lyl/fei1.png'},
            {href:'https://www.douban.com/',src:'/static/lyl/fei2.png'},
            {href:'http://www.renren.com/',src:'/static/lyl/fei3.png'},
            {href:'https://weibo.com/',src:'/static/lyl/fei4.png'},
            {href:'https://qzone.qq.com/',src:'/static/lyl/fei5.png'}
            ]
        }
      },
      mounted(){
        setInterval(function () {
          var date = new Date();
          var date2 = new Date(2019,0,7,16,0,0);
          var s = date2 - date;
          this.day = parseInt(s/1000/60/60/24);
          s-=this.day*24*60*60*1000;
          this.hour = parseInt(s/1000/60/60);
          s-=this.hour*60*60*1000;
          this.minete = parseInt(s/1000/60);
          s-=this.minete*60*1000;
          this.secnd = parseInt(s/1000);
          this.secnd = formatTime(this.secnd);
          this.minete = formatTime(this.minete);
          this.hour = formatTime(this.hour);
          this.day = formatTime(this.day);
          function formatTime(t){
            return t < 10 ? "0"+t : t;
          }
        }.bind(this),1000)
      },
      methods:{
        yiru(){
          this.$refs.zoomDiv.style.display = "block";
          this.$refs.bigDiv.style.display = "block";
        },
        yichu(){
          this.$refs.zoomDiv.style.display = "none";
          this.$refs.bigDiv.style.display = "none";
        },
        yidong(e){
          var eve = e || window.event;
          var l = eve.clientX - this.$refs.wrapDiv.offsetLeft - this.$refs.zoomDiv.offsetWidth/2;
          var t = document.documentElement.scrollTop + eve.clientY - this.$refs.wrapDiv.offsetTop - this.$refs.zoomDiv.offsetHeight/2;
          var maxL = this.$refs.normalDiv.clientWidth - this.$refs.zoomDiv.offsetWidth;
          var maxT = this.$refs.normalDiv.clientHeight - this.$refs.zoomDiv.offsetHeight;
          //限制移动区域
          if (l <= 0) {
            l = 0;
          };
          if (l >= maxL) {
            l = maxL;
          }
          if (t <= 0) {
            t = 0;
          }
          if (t >= maxT) {
            t = maxT;
          }
          this.$refs.zoomDiv.style.left = l + "px";
          this.$refs.zoomDiv.style.top = t + "px";
          //方块跟随移动的同时 在右侧放大区域显示方块内的放大图
          //比例 = 方块移动的距离/方块可移动最大距离 = 右侧大图的位置/右侧大图可移动最大距离
          //方式1：修改右侧区域的scrollLeft/scrollTop
          this.$refs.bigDiv.scrollLeft = l/maxL * (this.$refs.bigDiv.scrollWidth - this.$refs.bigDiv.clientWidth);
          this.$refs.bigDiv.scrollTop = t/maxT * (this.$refs.bigDiv.scrollHeight - this.$refs.bigDiv.clientHeight);
          //方式2：修改大图片的定位left/top值
        },
        xuanzhong(i){
          this.cur = i;
          this.src = this.data[i];
        },
        youyi(){
          this.cur +=1;
          if (this.cur>3) {
            this.cur = 0;
          }
          this.src = this.data[this.cur];
        },
        zuoyi(){
          this.cur -=1;
          if (this.cur<0) {
            this.cur = 3;
          }
          this.src = this.data[this.cur];
        },
        xuanzhong2(i){
          this.cur6 = i;
        },
        xuanzhong3(i){
          this.cur7 = i;
        },
        shifou(){
          this.bol = !this.bol;
        },
        jian(){
          this.n -= 1;
          if (this.n == 0){
            this.n = 1;
          }
        },
        jia(){
          this.n += 1;
        },
        tanchu(){
          this.$store.commit('change4');
        }
      }
    }
</script>

<style scoped>
  .content{
    width: 1280px;
    margin: 20px auto 40px;
    display: flex;
    justify-content: space-between;
  }
  .wrap{
    position: relative;
    width: 500px;
    height: 500px;
  }
  .wrap .seti{
    position: absolute;
    top: 0;
    width: 440px;
    margin-left: 30px;
    height: 60px;
    text-align: center;
    background: #f5f5f8;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .wrap .seti span{
    font-size: 20px;
  }
  .wrap .seti .block{
    font-size: 16px;
    width: 46px;
    height: 31px;
    line-height: 31px;
    text-align: center;
    border-radius: 5px;
    background: #ff5757;
    color: #fff;
  }
  .wrap .footer2{
    display: flex;
    justify-content: space-between;
    margin: 40px 0;
  }
  .wrap .footer2 img{
    width: 90px;
    height: 90px;
    cursor: pointer;
  }
  .wrap .footer2 .act4{
    border: 1px solid #f08200;
  }
  .wrap .footer2 img:nth-child(1){
    width: 23px;
    height: 41px;
    align-self: center;
  }
  .wrap .footer2 img:nth-child(6){
    width: 23px;
    height: 41px;
    align-self: center;
  }
  .normal-wrap{
    position: relative;
    width: 500px;
    height: 500px;
  }
  .normal-wrap img{
    width: 500px;
    height: 500px;
  }
  .zoom{
    position: absolute;
    left: 0;
    top: 0;
    width: 250px;
    height: 250px;
    background:url('/static/lyl/T12pdtXaldXXXXXXXX-2-2.png');
    cursor: move;
    display: none;
  }
  .big-wrap{
    position: absolute;
    left: 510px;
    top: 0;
    width: 500px;
    height: 500px;
    overflow: hidden;
    display: none;
  }
  .big-wrap img{
    width: 1000px;
    height: 1000px;
  }

  .content .con-right{
    width: 740px;
  }
  .content .con-right .right-tit{
    border-bottom: 1px solid #ccc;
    padding-bottom: 20px;
  }
  .content .con-right .right-tit p:nth-child(1){
    font-size: 24px;
    padding: 10px 0;
  }
  .content .con-right .right-tit p:nth-child(2) span{
    margin-right: 20px;
    font-size: 16px;
    padding: 0 20px;
    background: #498e3d;
    color: #fff;
  }
  .content .con-right .right-tit p:nth-child(2) span:nth-child(2){
    background: #f08200;
  }
  .content .con-right .right-center{
    border-bottom: 1px solid #ccc;
    padding: 20px 0;
    display: flex;
  }
  .content .con-right .right-center .right-center-l{
    text-align: center;
  }
  .content .con-right .right-center .right-center-l p{
    width: 120px;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    border-radius: 15px;
    background: #ffe313;
    text-align: center;
    margin-top: 12px;
  }
  .content .con-right .right-center>p{
    font-size: 16px;
    line-height: 30px;
    color: #666;
    margin-left: 30px;
    padding-top: 20px;
  }
  .right-foot p:nth-child(1){
    padding: 30px 0;
  }
  .right-foot p:nth-child(1) span{
    font-size: 28px;
    color: #ff5757;
  }
  .right-foot p:nth-child(1) span:nth-child(3){
    font-size: 16px;
    color: #666;
    text-decoration: line-through;
  }
  .right-foot .please span{
    font-size: 18px;
    color: #959595;
  }
  .right-foot .please .guige{
    font-size: 14px;
    display: inline-block;
    width: 80px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    border:1px solid #d4d4d4;
    margin-left: 20px;
    cursor: pointer;
  }
  .right-foot .please .active{
    background: #f4fff2;
    border: 1px solid #498e3d;
  }
  .right-foot p:nth-child(3){
    margin: 20px 0 30px 0;
  }
  .fot-d1{
    display: flex;
  }
  .fot-d1 .fot-d1-left{
    display: flex;
  }
  .fot-d1 .fot-d1-left span{
    font-size: 18px;
    align-self: center;
  }
  .fot-d1 .fot-d1-left p{
    display: flex;
    margin: 0 12px;
  }
  .fot-d1 .fot-d1-left p span{
    width: 35px;
    height: 32px;
    border: 1px solid #d3d3d3;
    background: #f2f2f2;
    text-align: center;
    line-height: 32px;
    font-size: 20px;
    font-weight: bolder;
    cursor: pointer;
  }
  .fot-d1 .fot-d1-left p span:nth-child(2){
    width: 60px;
    background: #fff;
    border-left: 0;
    border-right: 0;
  }
  .fot-d1 button{
    width: 150px;
    height: 50px;
    border-radius: 10px;
    background: #f08200;
    color: #fff;
    font-size: 20px;
    margin-left: 20px;
    cursor: pointer;
  }
  .right-foot2{
    display: flex;
    margin-top: 40px;
  }
  .right-foot2 .right-foot2-right{
    margin-left: 40px;
  }
  .right-foot2 span{
    font-size: 16px;
    vertical-align: top;
  }
  .right-foot2 img{
    margin-right: 10px;
    cursor: pointer;
  }
</style>
